<template>
  <div >

    <div class='app-container'>
      <el-form ref="form" label-width="80px" inline :model="form" >
        
  <el-form-item label="设备编号:" >
    <el-input v-model="form.innerCode" palceholder='请输入'></el-input>
  </el-form-item>
  
  

  <el-form-item>
    <el-button type="primary" @click='search'><i class="el-icon-search"></i>查询</el-button>
  </el-form-item>
  </el-form>
    </div> 


  <div class='app-container'>
   <el-card shadow="always">
      <el-button type="primary" class='config1' icon="el-icon-plus" @click="add">新建</el-button>
      <el-button type="primary" class='config' @click='config'>批量操作</el-button>
    </el-card>
    <el-table style="width: 100%" :data='shjlblist'>
      <el-table-column
        label="序号"
        type='index'
        :index='getIndex'
        >
      </el-table-column>
      <el-table-column
        prop="innerCode"
        label="设备编号"
        >
      </el-table-column>
      <el-table-column
        prop="type.name"
        label="设备型号">
      </el-table-column>
         <el-table-column
        prop="node.name"
        label="详细地址">
      </el-table-column>
       <el-table-column
        prop="node.ownerName"
        label="合作商">
        </el-table-column>
        <!-- status   售货机状态(0:未投放;1-运营;3-撤机) -->
        <el-table-column
        prop="businessId" 
        label="设备状态">
      </el-table-column>
      <el-table-column  
        label="操作">
        <template #default='{row}'>
        <el-button type="text" @click='huoDao(row)'>货道</el-button>
         <el-button type="text" @click='config(row)'>策略</el-button>
          <el-button type="text" @click='xiuGai(row)'>修改</el-button>
        </template>
      </el-table-column>
      
    </el-table>
      <div class="page">
        <div class="left">
          <span>共{{params.totalCount}}条记录</span>
          <span>第 {{params.pageIndex}}/{{params.totalPage}}页</span>
        </div>
        <div class="right">
          <el-button-group>
     <el-button type="primary" 
      @click=shjlbAp(-1) :disabled='params.pageIndex<=1?true:false'>上一页</el-button>
      <el-button type="primary" @click=shjlbAp(1)>下一页</el-button>
      </el-button-group>
        </div>
      </div>
    </div>

    
  <add :visible.sync='visible' ref='add' :shjlxllist.sync='shjlxllist' :xzdwlist.sync='xzdwlist'></add>
  <config :order.sync='order' :xzcllist.sync='xzcllist'></config>
  <detail :detaill.sync='detaill' :row='row' @edit='edit'></detail>
  <huoDao :huoDaoisshow.sync='huoDaoisshow'></huoDao>
  <xiuGai :xiugaiisshow.sync='xiugaiisshow' :xgsblist.sync='xgsblist' :shjlblist.sync='shjlblist'></xiuGai>
                      <!-- <znph :znphisshow.sync='znphisshow'></znph> -->
  </div>
</template>

<script>
import Add from './components/add.vue'
import Config from './components/config.vue'
import Detail from './components/detail.vue'
import huoDao from './components/huo-dao.vue'
import xiuGai from './components/xiu-gai-she-bei.vue'
// import znph from './components/zhi-neng-pai-huo.vue'

import {getListApi,searchApi,gettstatus} from '@/api/order'
import ItemVue from '@/layout/components/Sidebar/Item.vue'

// api  
import {shjlbApi , shjlxlbApi , cllbApi } from '@/api/deviceManagement'

export default {
  name: 'HrsaasIndex',
  components:{
    Add,
    Config,
    Detail,
    huoDao,
    xiuGai
  },
  data() {
    return {
      form:{
        taskCode: '',
        status: '',
      },
        list:[],
        visible:false,
        // 工单配置
        order:false,
        // 查看详情
        detaill:false,
        // 货到 
        huoDaoisshow:false,
        // 修改设备 
        xiugaiisshow:false,
        // // 智能排货 
        // znphisshow:false,

        row:{},
        params:{
          pageIndex: 0,
          pageSize: 10,
          totalCount:0,
          totalPage:0,
          isRepair: false
        },
        // 状态
        status:[],


  //  搜索售货机(售货机列表)  渲染页面表格
        shjlblist : [] ,

        // 新建  选择型号 渲染
        shjlxllist:[],
        // 新建  选择点位 渲染
        xzdwlist:[],
        //  批量操作  选择策略渲染
        xzcllist:[],
        // 修改设备 选择点位渲染
        xgsblist:[],
    };
  },

  created() {
    this.gettstatus()
    
    // 搜索售货机(售货机列表) 
    this.shjlbAp()

      // 新建  选择型号 渲染
    this.shjlxlbAp()

    // 批量操作  选择策略渲染
    this.cllbAp()
  },

  methods: {
    // 新增工单
    add(){
      this.visible=true
    },
    // 工单配置
    config(){
      this.order=true
    },
    // 查看详情
    detail(row){
      this.detaill=true
      console.log(row,'row是啥');
      this.row=row
    },
    // 货到
    huoDao(row){
      this.huoDaoisshow=true
    },
    // 修改设备
   xiuGai(row){
      this.xiugaiisshow=true
      console.log(row,'1111111111');
      // 修改设备 选择点位渲染
      this.xgsblist=row

   },

    // 查询
  async search(){
      const res= await shjlbApi(this.form)
      console.log(res,'hhhhhhhhh');
      this.shjlblist=res.currentPageRecords
    },
    
   // 排序延续
  getIndex (index) {
  const page = this.params.pageIndex
  const pagesize = this.params.pageSize//当前页数 - 1*每页数据条数 + index + 1
  return (page - 1) * pagesize + index + 1},
  
  // 获取工单状态
  async gettstatus(){
    const res = await gettstatus()
    // console.log(res,'能获取工单状态吗');
    this.status=res
  },
  // 重新创建
  edit(row){
    this.detaill=false
    this.visible=true
    console.log(row,'row的数据传递过来了吗');
    // const {createType,innerCode,userId,productTypeId:productType,desc,details} = row
    // this.$refs.add.form={createType,innerCode,userId,productType,desc,details}
    this.$refs.add.form={...row}
    // console.log(this.$refs.add.form,'好奇这个数据');
  },

 
  // 搜索售货机(售货机列表)    渲染主页面
     async shjlbAp(num=0){
       this.params.pageIndex=+this.params.pageIndex+num
       const res =  await shjlbApi(this.params)
      //  console.log(res,'新增售货机类型');    //currentPageRecords
       this.params.pageIndex=res.pageIndex
       this.params.totalPage=res.totalPage

       this.shjlblist = res.currentPageRecords
  
       this.shjlblist.forEach(ele => {
        ele.method = '手动'
      })
      this.params.totalCount = parseInt(res.totalCount)
      // console.log(this.list,'真个页面结果是什么');


        // 新建  选择型号 渲染
       this.xzdwlist= res.currentPageRecords
     },


     // 售货机类型列表(搜索)    
     async shjlxlbAp(){
       const res =  await shjlxlbApi(this.params)
      //  console.log(res.currentPageRecords,'新增售货机类型');    //currentPageRecords
       this.shjlxllist = res.currentPageRecords
       console.log(this.shjlxllist);
     },


    //  cllbApi  批量操作  选择策略渲染
     async cllbAp(){
       const res =  await cllbApi(this.params)
       console.log(res);    //currentPageRecords
       this.xzcllist = res
     },


  },
};
</script>

<style lang="scss" scoped>
.el-form{
  // width: 1159px;
  height: 64px;
  padding-top: 14px;
  background-color: #fff;
  border:none
}
.el-icon-search{
  margin-right: 7px;
}
.config{
  background-color: #fbf4f0;
  color:#655b56;
  border:none;
  cursor: pointer;
}
.config1{
  background-color: #ff893b;
  color:#fff;
  border:none;
  cursor: pointer;
}
.el-table{
  padding: 10px;
  border:none
}
.page{
  height: 100px;
  line-height: 100px;
  background-color: #fff;
  display: flex;
  color:#dbdfe5;
  font-size: 20px;
  padding-left: 20px;
  .left{
    span{
      margin-right: 5px;
    }
  }
  .right{
    margin-left: 750px;
   ::v-deep .el-button{
      margin-left: 10px;
      background-color: #d5ddf8;
      border: none;
      color:#606266
       }
    
  }
}
</style>